<template>
  <div>
    <a-tabs @change="handleChange">
      <a-tab-pane key="1" tab="本周生产统计">
        <a-card>
          <G2Test></G2Test>
        </a-card>
      </a-tab-pane>
      <a-tab-pane key="2" tab="本周产品良品率统计">
        <a-card>
          <ChartSale></ChartSale>
        </a-card>
      </a-tab-pane>
      <a-tab-pane key="3" tab="本周采购物料统计">
        <ChartProduct />
      </a-tab-pane>
    </a-tabs>
    <!--    <a-button type='primary' @click='msgTest'>消息测试</a-button>-->
  </div>
</template>

<script>
import TodayProduce from '@views/hfcharts/TodayProduce.vue'
import ChartSale from '@views/dashboard/ChartSale.vue'
import ChartPurchase from '@views/dashboard/ChartPurchase.vue'
// import { WebsocketMixin } from '@/mixins/WebsocketMixin'
import { getAction } from '@api/manage'
import ChartProduct from '@views/dashboard/ChartProduct.vue'
import G2Test from '@views/dashboard/G2Test.vue'

export default {
  name: 'Analysis',
  components: {
    G2Test,
    ChartProduct,
    ChartPurchase,
    ChartSale,
    TodayProduce
  },
  mixins: [],
  data() {
    return {
      activeKey: 1,
      chart1: null,
      option1: {
        title: {
          text: '良品率'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {},
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            dataView: { readOnly: false },
            magicType: { type: ['line', 'bar'] },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} %'
          }
        },
        series: [
          {
            name: '530B三角窗上部右侧装饰条_喷涂件',
            type: 'line',
            data: [50, 61, 73, 51, 82, 92, 89],
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' }
              ]
            },
            markLine: {
              data: [{ type: 'average', name: 'Avg' }]
            }
          },
          {
            name: 'E38左侧扰流板-钢琴黑_喷涂件',
            type: 'line',
            data: [10, 30, 50, 70, 30, 72, 90],
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' }
              ]
            },
            markLine: {
              data: [
                { type: 'average', name: 'Avg' },
                [
                  {
                    symbol: 'none',
                    x: '90%',
                    yAxis: 'max'
                  },
                  {
                    symbol: 'circle',
                    label: {
                      position: 'start',
                      formatter: 'Max'
                    },
                    type: 'max',
                    name: '最高点'
                  }
                ]
              ]
            }
          }
        ]
      }
    }
  },
  created() {},
  methods: {
    handleChange(key) {},
    websocketOnmessage: function(e) {
      console.log('-----接收消息-------', e.data)
      let data = eval('(' + e.data + ')') //解析对象
      if (data.cmd === 'topic') {
        this.msgTest()
        //系统通知
        this.$notification.open({
          message: '您有一条新的消息',
          description: '消息通知',
          duration: 3,
          onClick: () => {
            console.log('Notification Clicked!')
          }
        })
      } else if (data.cmd === 'user') {
        //用户消息
      }
      //心跳检测重置
      //this.heartCheck.reset().start();
    },
    msgTest() {
      getAction('/warning/testPush').then(res => {
        console.log('res', res)
      })
    }
  },
  watch: {}
}
</script>
<style scoped></style>
